<template>
    <div id='propertyManager'>
        <el-row :gutter="20" >
            <el-col :span="12" :offset="6">
                <el-form ref="form" :model="form" status-icon :rules="rules" label-width="120px">
                    <el-form-item label="账户名" prop='propertyManagerName'>
                        <el-input v-model="form.propertyManagerName"></el-input>
                    </el-form-item>
                    <el-form-item label="物业名称"  prop='propertyName'>
                        <el-input v-model="form.propertyName"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop='propertyManagerPassword'>
                        <el-input placeholder="请输入密码"  v-model="form.propertyManagerPassword" show-password></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话" prop='propertyPhone'>
                        <el-input v-model="form.propertyPhone"></el-input>
                    </el-form-item>
                    <el-form-item label="物业LOGO">
                        <el-upload
                            class="avatar-uploader"
                            action="http://localhost:8082/upload"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="cansleReg">取消</el-button>
                        <el-button type="primary" @click="onSubmit" :disabled='btnEnable'>立即创建</el-button> 
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>        
    </div>
</template>
<style>
    #propertyManager{
        margin-top:30px;
    }
</style>

<script>
    export default {
        name:'propertyManager',
        data(){
            var checkPropertyManagerName = (rule, value, callback) => {
                if (value === '') {
                callback(new Error('账户名称不能为空'));
                this.check.propertyManagerName=false;
                } else {                
                    this.check.propertyManagerName=true;
                    callback();
                    if(this.check.propertyManagerName&&this.check.propertyName&&this.check.propertyManagerPassword&&this.check.propertyPhone){
                        this.btnEnable=false;        
                    }
                }
            };
            var checkPropertyName = (rule, value, callback) => {
                if (value === '') {
                callback(new Error('物业名称不能为空'));
                this.check.propertyName=false;
                } else {                
                    this.check.propertyName=true;
                    callback();
                    if(this.check.propertyManagerName&&this.check.propertyName&&this.check.propertyManagerPassword&&this.check.propertyPhone){
                        this.btnEnable=false;        
                    }
                }
            };
            var checkPropertyManagerPassword = (rule, value, callback) => {
                if (value === '') {
                callback(new Error('密码不能为空'));
                this.check.propertyManagerPassword=false;
                } else {                
                    this.check.propertyManagerPassword=true;
                    callback();
                    if(this.check.propertyManagerName&&this.check.propertyName&&this.check.propertyManagerPassword&&this.check.propertyPhone){
                        this.btnEnable=false;        
                    }
                }
            };
            var checkPropertyPhone = (rule, value, callback) => {
                if (value === '') {
                callback(new Error('密码不能为空'));
                this.check.propertyPhone=false;
                } else if (value.length!=11){
                callback(new Error('电话必须是11位'));
                this.check.propertyPhone=false;
                } else {                
                    this.check.propertyPhone=true;
                    callback();
                    if(this.check.propertyManagerName&&this.check.propertyName&&this.check.propertyManagerPassword&&this.check.propertyPhone){
                        this.btnEnable=false;        
                    }
                }
            };
            return{
                imageUrl:'',
                btnEnable:true,
                form:{
                    propertyManagerName:'',
                    propertyName:'',
                    propertyManagerPassword:'',
                    propertyPhone:'',
                    propertyPic:'',
                },
                rules: {
                    propertyManagerName: [
                        { validator: checkPropertyManagerName, trigger: 'blur' }
                    ],
                    propertyName: [
                        { validator: checkPropertyName, trigger: 'blur' }
                    ],          
                    propertyManagerPassword: [
                        { validator: checkPropertyManagerPassword, trigger: 'blur' }
                    ],          
                    propertyPhone: [
                        { validator: checkPropertyPhone, trigger: 'blur' }
                    ],          
                },
                check:{
                    propertyManagerName:'',
                    propertyName:'',
                    propertyManagerPassword:'',
                    propertyPhone:'',
                }
            }
        },
        methods:{
            onSubmit(){
                this.$axios.post('/registerPropertyManager',this.form)
                .then(resp=>{
                    if(resp.data.success){
                        this.$message({
                            message:"注册成功",
                            type:'success'
                        })
                        this.form={
                            propertyManagerName:'',
                            propertyName:'',
                            propertyManagerPassword:'',
                            propertyPhone:'',
                            propertyPic:'',
                        };
                        this.imageUrl='';
                    }else{
                        this.$message({
                            message:resp.data.message,
                            type:'warning'
                        })
                    }
                })
                .catch(error=>{
                    this.$message.error('系统未知错误');
                    console.log(error);
                })
            },
            cansleReg(){
                this.form={
                    propertyManagerName:'',
                    propertyName:'',
                    propertyManagerPassword:'',
                    propertyPhone:'',
                    propertyPic:'',
                }
            },
            handleAvatarSuccess(res, file) {
                
                this.form.propertyPic=res.message;
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
        }
    }
</script>